<template>
  <div>
    <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">
      <el-table-column
        label="编号"
        width="120px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="姓名"
        width="120">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="性别" prop="sex" width="120"></el-table-column>
      <el-table-column label="年龄" prop="age" width="120"></el-table-column>
      <el-table-column label="生日" prop="birthday" width="200"></el-table-column>
      <el-table-column label="地址" prop="address" width="500"></el-table-column>
      <el-table-column align="left">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)">
            <el-button
              slot="reference"
              size="mini"
              type="danger">删除
            </el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

    <el-row>
      <el-col :span="14" :offset="10">
        <el-pagination
          @current-change="changeCurrent"
          @size-change="changeSize"
          :current-page="pageNo"
          prev-text="上一页"
          next-text="下一页"
          background
          :page-size="pageSize"
          :page-sizes=[2,4,6,8,10]
          layout="prev, pager, next,jumper,total,sizes"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>


    <el-button @click="addUser" style="margin-top: 10px;" type="success" size="mini">添加</el-button>

    <el-dialog @close="guanbi" title="用户信息" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form :model="user" :rules="rules" ref="ruleForm">
        <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
          <el-input v-model="user.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio v-model="user.sex" label="男">男</el-radio>
          <el-radio v-model="user.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="年龄" prop="age" :label-width="formLabelWidth">
          <el-input v-model="user.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="生日" :label-width="formLabelWidth">
          <el-date-picker
            v-model="user.birthday"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="user.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="saveUser">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "User_List",
  data() {
    return {
      pageNo:1,
      pageSize:4,
      total:0,
      rules: {
        name: [
          {required: true, message: '请输入名字', trigger: 'blur'},
        ],
        age: [
          {required: true, message: '请输入年龄', trigger: 'blur'},
        ],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      tableData: [],
      search: '',
      dialogFormVisible: false,
      user: {
        id: '',
        name: '',
        sex: '男',
        age: '',
        birthday: '',
        address: '',
      },
      formLabelWidth: '120px',

    }
  },
  methods: {
    /*编辑*/
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      console.log(index, row);
      this.$http.get('http://localhost:8081/user/findUserById', {
        params: {
          id: row.id,
        }
      }).then(res => {
        this.user = res.data;
        console.log(this.user.id + '编辑操作');
      });
    },
    /*删除*/
    handleDelete(index, row) {
      console.log(index, row.id);

      this.$http.get('http://localhost:8081/user/delUserById', {
        params: {
          id: row.id,
        }
      }).then(res => {
        if (res.data.status) {
          this.findAll();
        }
      });
    },
    /*展示添加或者编辑页面*/
    addUser() {
      this.user = {sex: '男',};
      this.dialogFormVisible = true;
    },
    /*确认关闭*/
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    /*查询全部用户信息*/
    findAll() {
      this.$http.get('http://localhost:8081/user/findAll',{
        params:{
          pageNo:this.pageNo,
          pageSize:this.pageSize,
        }
      }).then(res => {
        console.log(res.data.user_list);
        this.tableData = res.data.user_list;
        this.total=res.data.total;1
      });
    },
    changeCurrent(page){
      this.pageNo=page;
      this.findAll();
    },
    changeSize(pageSize){
      this.pageSize=pageSize;
      this.findAll();
    },
    /*保存用户信息*/
    saveUser() {
      this.$http.post('http://localhost:8081/user/saveUser', this.user).then(res => {
        if (res.data.status) {
          this.$message({
            message: '恭喜你，' + res.data.message,
            type: 'success'
          });
          this.findAll();
          this.dialogFormVisible = false;
        } else {
          this.$message.error('错了哦，' + res.data.message);
        }

      });
    },
    /*取消*/
    resetForm(formName) {
      this.dialogFormVisible=false;/*关闭添加页面*/
      this.$refs[formName].resetFields();/*重置验证*/
    },
    guanbi(){
      console.log("哈哈哈，我关闭了");
      this.$refs['ruleForm'].resetFields();/*重置验证*/
    }
  },
  created() {
    /*查询全部用户信息*/
    this.findAll();
  }
}
</script>

<style scoped>

</style>
